<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>
			
			/* red 红色 宽度50  高度50 */
			.red {
				background-color: red;
				width: 50px;
				height: 50px;
			}
			
			.blue {
				background-color: aqua;
				width: 100px;
				height: 100px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<!-- a标签的属性绑定
				需求: href中的属性动态赋值
				语法: v-bind:href="VUE中的属性"
			 -->
			<a v-bind:href="url">百度</a>
			<!-- 简化写法 -->
			<a :href="url">百度</a>
			<hr />
			
			<!-- 2.class类型绑定 
				class中可以定义多个样式.简化程序的调用
				需求: 需要动态的为class赋值
				规则: :class是属性的绑定,绑定之后查找对应的属性
				colorClass: "blue" 之后根据value值 blue 查找对应的CSS样式
				15上课
			-->
			<div :class="colorClass">我是class修饰</div>
			<hr >
			
			<!-- 3. 属性切换 
				    需求: 通过按钮控制样式是否展现 属性
					语法: :class={class类型的名称: false}
			-->
			<div :class="{red: flag}">我是class修饰</div>
			<button @click="flag = !flag">切换</button>
			
			<!-- 小结:
					1.如果需要切换样式 使用属性变量colorClass: "blue"
					2.如果切换是否显示 使用 :class="{red: flag}"
			 -->
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const APP = new Vue({
				el: "#app",
				data: {
					url: "http://www.baidu.com",
					colorClass: "blue",
					flag: true
				}
			})
		</script>	
	</body>
</html>
